<template>
	<view>
		<view>
			<uni-card>
				<view style="position: relative;">
					<image class="waitImg" :src="waiturl"></image>
					<text class="title">待装车</text>
				</view>
				<view class="line"></view>
				<text class="driverInfo">运单编号:</text>
				<text class="driverInfo">YD2023062057298&nbsp;&nbsp;|</text>
				<text class="driverInfo" style="margin-left: 10px;">复制</text><br>
				<text class="driverInfo">司机姓名:</text>
				<text class="driverInfo">芦建兵</text><br>
				<text class="driverInfo">车牌号:</text>
				<text class="driverInfo">晋A00001</text>
			</uni-card>
		</view>
		<view>
			<uni-card>
				<view>
					<text class="titleleft">货源</text>
					<view class="selectInfo">
						<view class="titleright">
							<image class="gotoImg" :src="gotourl"></image>
						</view>
						<text class="righttitle">详情</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="load-location">
					<view class="load-car">
						<image class="load-car-img" :src="loadurl"></image>
						<text class="load-title">gg-侯村乡龙角山龙城森林公园</text>
						<image class="dituImg" :src="dituurl"></image><br />
						<text class="load-text">山西省太原市阳曲县侯村乡龙城森岭公园</text>
					</view>
					<view class="load-car">
						<image class="load-car-img" :src="unloadurl"></image>
						<text class="load-title">郭志华-龙城公园</text>
						<image class="dituImg" :src="dituurl"></image><br />
						<text class="load-text">山西省太原市杏花岭区中间涧河镇232县道龙城公园</text>
					</view>
				</view>
			</uni-card>
		</view>
		<view>
			<uni-card>
				<text class="titleleft">运价</text>
				<view class="line"></view>
				<text class="driverInfo">运价:</text>
				<text class="price">{{price}}元/吨</text><br>
				<text class="driverInfo">邮费:</text>
				<text class="youprice">{{youprice}}元</text>
				<text class="beizhu">亏0.00吨(含)不扣费,超出部分每0.1吨(含)扣0.00元</text>
			</uni-card>
		</view>
		<view>
			<uni-card>
				<text class="titleleft">异常上报</text>
				<view class="selectInfo">
					<view class="titleright">
						<image class="gotoImg" :src="gotourl"></image>
					</view>
					<text class="righttitle">详情</text>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				waiturl: '../../static/img/wait.png',
				gotourl: '../../static/img/goto.png',
				loadurl: '../../static/img/transport/load.png',
				unloadurl: '../../static/img/transport/unload.png',
				dituurl: '../../static/img/ditu.png',
				price: 35.01,
				youprice: 0.00
			}
		},
		methods: {

		}
	}
</script>

<style>
	.driverInfo {
		display: inline-block;
		font-size: 16px;
		margin: 5px 0px;
		color: #5d5d5d;
		font-weight: bold;
	}

	.waitImg {
		width: 50px;
		height: 50px;
	}

	.title {
		display: inline-block;
		font-size: 22px;
		font-weight: bold;
		margin-left: 15px;
		color: #f16c06;
		position: absolute;
		top: 20px;
	}

	.line {
		height: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #d3d3d3;
	}

	.selectInfo {
		float: right;
		display: inline-block;
	}

	.titleleft {
		font-size: 20px;
		font-weight: bold;
	}

	.titleright {
		position: relative;
		float: right;
		display: inline-block;
	}

	.righttitle {
		line-height: 25px;
		font-size: 16px;
		color: #1296db;
		float: right;
	}

	.gotoImg {
		margin-top: 4px;
		width: 15px;
		height: 15px;
	}

	.load-car-img {
		width: 25px;
		height: 25px;
		float: left;
		margin: 5px;
	}

	.load-car {
		margin: 20px 0px 15px 0px
	}

	.load-title {
		width: 400rpx;
		font-size: 16px;
		font-weight: bold;
		/*第一步： 溢出隐藏 */
		overflow: hidden;
		/* 第二步：让文本不会换行， 在同一行继续 */
		white-space: nowrap;
		/* 第三步：用省略号来代表未显示完的文本 */
		text-overflow: ellipsis;
	}

	.load-text {
		width: 400rpx;
		color: #878787;
		/*第一步： 溢出隐藏 */
		overflow: hidden;
		/* 第二步：让文本不会换行， 在同一行继续 */
		white-space: nowrap;
		/* 第三步：用省略号来代表未显示完的文本 */
		text-overflow: ellipsis;
	}

	.dituImg {
		display: inline-block;
		width: 20px;
		height: 20px;
		float: right;
	}

	.price {
		color: #f73900;
		font-size: 18px;
		float: right;
	}

	.youprice {
		font-size: 18px;
		float: right;
	}

	.beizhu {
		display: block;
		font-size: 15px;
		margin: 5px 0px;
		color: #a7a7a7;
	}
</style>